<template>
    <div class="debug" v-if="errLogs.length > 0">
        <el-badge is-dot class="item">
            <div class="debug-icon flex flex-center" @click="openErrLogs">
                <svg-icon icon-class="bug" />
            </div>
        </el-badge>
        <!-- 弹出框 -->
        <el-dialog :visible.sync="errDialogVisible" width="75%">
            <div slot="title" class="err-header-title">
                <span class="err-title-name" style="display: inline-block; margin-right:15px;">日志列表</span>
                <el-button type='primary' plain size="mini" @click="clearLogs">清空</el-button>
            </div>
            <el-table :data="errLogs" border>
                <el-table-column label="消息">
                    <template slot-scope="scope">
                        <div class="margin-centent err-message">
                            <div class="msg err-message-item padding-top">
                                <span class="err-message-item-title">Msg:</span>
                                <el-tag type='danger' plain size="medium"> {{ scope.row.message.msg | ellipsis }} </el-tag>
                            </div>
                            <div class="info err-message-item padding-top">
                                <span class="err-message-item-title">Info:</span>
                                <el-tag type='warning' plain size="medium">{{ scope.row.message.info | ellipsis }}</el-tag>
                            </div>
                            <div class="url err-message-item padding-top">
                                <span class="err-message-item-title">Url:</span>
                                <el-tooltip class="item" effect="dark" :content="scope.row.message.url"
                                    placement="top-start">
                                    <el-tag type='success' plain size="medium">{{ scope.row.message.url | ellipsis
                                    }}</el-tag>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="stack" label="堆栈"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ErrorLog',
    filters: {
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 70) {
                return value.slice(0, 70) + '...'
            }
            return value
        }
    },
    computed: {
        errLogs() {
            return this.$store.getters.errLogs
        }
    },
    data() {
        return {
            errDialogVisible: false,
        }
    },
    methods: {
        // 打开错误页面
        openErrLogs() {
            // 打开dialog
            this.errDialogVisible = true;
        },
        // 清除日志
        clearLogs() {
            this.errDialogVisible = false;
            this.$store.dispatch('errorLogs/clearErrorLog')
        }
    }
}
</script>

<style scoped>
.debug {
    width: 50px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.debug:hover {
    background: rgba(0, 0, 0, 0.05);
}

.debug:active {
    background: rgba(0, 0, 0, 0.1);
}

.debug .debug-icon {
    width: 30px;
    height: 30px;
    color: white;
    background: rgb(242, 96, 96);
    font-size: 14px;
    border-radius: 3px;
}

.err-message {
    padding-left: 15px;
}

.err-message .err-message-item-title {
    display: inline-block;
    width: 55px;
    font-weight: 700;
    font-size: 16px;
}
</style>